<template>
	<view class="chartsBox">
		<view class="chartsTitle">
			<h4>月目标达成</h4>
		</view>


		<up-datetime-picker hasInput :show="show" v-model="selectedMonth" mode="year-month" closeOnClickOverlay
			@click="show = true" @cancel="show = false" @confirm="handleConfirm" @close="show = false">

			<template #trigger>
				<up-input v-model="inputMonth" placeholder="选择月份" readonly prefixIcon="calendar"
					prefixIconStyle="font-size: 22px;color: #909399"></up-input>
				<!-- <u-icon name="calendar" color="#666" size="28rpx" class="picker-icon" /> -->
			</template>
		</up-datetime-picker>




		<view class="achievementInfo">
			<text class="orangeColor" style="font-size: 36rpx;font-weight: bold;">{{reachAch}}</text>元
		</view>

		<view class="compare">
			<text v-if="!(ringBasis == 0)" style="margin-right: 10rpx;">
				<text>环比</text>
				<text :style="{ color: ringBasis > 0 ? 'green' : 'red' }">{{ringBasis}}%</text>
			</text>
			<text v-if="!( basis== 0)">
				<text>同比</text>
				<text :style="{ color: basis > 0 ? 'green' : 'red' }">{{basis}}%</text>
			</text>


		</view>


		<view class="chartsMain">
			<view class="charts-box">
				<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" ref="chartRef" />

			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		nextTick,
		watch
	} from 'vue';

	import {
		homeGetMonthKpiSta
	} from '../../../utils/data';

	import {
		onShow
	} from '@dcloudio/uni-app'

	//========================月份选择器========================//

	const show = ref(false);

	//月份选择器里的时间戳
	let selectedMonth = ref(new Date().getTime())
	//显示在 输入框的 yyyy-mm时间
	let inputMonth = ref()

	//让输入框为当前月份
	const date = new Date();
	const year = date.getFullYear();
	const month = (date.getMonth() + 1).toString().padStart(2, '0');
	inputMonth.value = `${year}-${month}`



	//月份选择点击确认按钮
	let handleConfirm = (value) => {
		inputMonth.value = timestampToMonth(value.value)
		show.value = false

	}

	//将 时间戳 转化成 yyyy-mm格式
	let timestampToMonth = (timestamp) => {
		const date = new Date(timestamp);
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		return `${year}-${month}`;
	}







	// =============================获取图表实例============================//
	const chartRef = ref(null)

	let chartData = ref({

		series: []
	});

	let opts = reactive({
		timing: "easeOut",
		duration: 1000,
		rotate: false,
		rotateLock: false,
		color: ["#00c2ff"],
		padding: undefined,
		fontSize: 13,
		fontColor: "#666666",
		dataLabel: true,
		dataPointShape: true,
		dataPointShapeType: "solid",
		touchMoveLimit: 60,
		enableScroll: false,
		enableMarkLine: false,
		title: {
			name: '',
			fontSize: 20,
			color: "#000000",
			offsetX: 0,
			offsetY: -13
		},
		subtitle: {
			name: "",
			fontSize: 15,
			color: "#000000",
			offsetX: 0,
			offsetY: 0
		},
		extra: {
			arcbar: {
				type: "default",
				width: 7,
				backgroundColor: "#E9E9E9",
				startAngle: 1,
				endAngle: 0,
				gap: 2,
				direction: "cw",
				lineCap: "round",
				centerX: 0,
				centerY: 95,
				linearType: "custom",
				customColor: ['#1890FF']
			}
		}
	})

	//达成业绩
	const reachAch = ref();
	//达成率
	const reachRate = ref();
	//同比
	const basis = ref();
	//环比
	const ringBasis = ref();


	let getServerData = () => {

		//获取登录账号的businessId
		let userinfo = JSON.parse(uni.getStorageSync('userinfo'))
		let businessId = userinfo.businessId

		homeGetMonthKpiSta('/home/getMonthKpiSta', {
			businessId: businessId,
			month: inputMonth.value + '-01',
		}).then((res) => {
			if (res.code == 200) {

				reachAch.value = res.data.reachAch
				reachRate.value = res.data.reachRate / 100
				basis.value = res.data.basis
				ringBasis.value = res.data.ringBasis


				let result = {

					series: [{
						name: "达成率",
						data: +reachRate.value > 1 ? 1 : reachRate.value,

					}]
				};

				chartData.value = JSON.parse(JSON.stringify(result));

				opts.title.name = res.data.reachRate + '%'

			}

		})



	}


	// onMounted(() => {

	// 	getServerData()


	// })
	onShow(()=>{
		//月份复原
		selectedMonth.value = new Date().getTime()
		//让输入框为当前月份
		const date = new Date();
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		inputMonth.value = `${year}-${month}`
		
		//数据图表复原
		getServerData()
	})

	watch(inputMonth, (newCount, oldCount) => {
		getServerData()
	})
</script>

<style scoped lang="scss">
	.chartsBox {
		width: 337rpx;
		// height: 515rpx;
		padding: 18rpx;
		background: white;
		margin: 14rpx 0;

		.chartsTitle {
			width: 100%;
			height: 46rpx;
			margin-bottom: 14rpx;
		}



		.uniDataSelect {
			margin-bottom: 14rpx;
		}

		.achievementInfo {
			font-size: 24rpx;
		}

		.compare {
			font-size: 24rpx;
			height:34rpx;
		}

		.chartsMain {
			width: 100%;
			// height: 366rpx;
			height: 250rpx;

			// background-color: #bfa;
			/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
			.charts-box {
				width: 100%;
				height: 100%;
			}

		}
	}

	.orangeColor {
		color: #FF8F38;
	}
</style>